<template>
  <div class="content-outer">
    <div class="title rowFlex"><span>流量主功能</span> <el-switch
      v-model="status"
      :active-value="1"
      :inactive-value="2"
      @change="switchChange"
    ></el-switch></div>
    <el-tabs
      v-if="status==1"
      v-model="tabsActive"
      class="tabsPane"
      @tab-click="tabChange"
    >
      <el-tab-pane
        v-for="(item,index) in tasActiveList"
        :key="index"
        :label="item.label"
        :name="item.value"
        class="rowFlex flexWarp "
      >
        <component
          :is="item.component"
          v-if="tabsActive==item.value && status==1"
          :tab-item="item"
          :tabs-active="tabsActive"
          class="component"
          style="margin-top:10px;"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import advertise from './component/advertise.vue'
import { adverSwitch, adSwitchStatus } from '@/api/adver'
import { mapState } from 'vuex'
export default {
  components: {
    advertise
  },
  computed: {
    ...mapState('user', ['routerItem'])
  },
  data() {
    return {
      tabsActive: 'screen',
      preject: '',
      tasActiveList: [
        { component: 'advertise', label: '插屏广告', value: 'screen', type: 1 },
        { component: 'advertise', label: '激励广告', value: 'incentive', type: 2 }
      ],
      status: 2 // 2关闭 1 开启
    }
  },
  mounted() {
    this.preject = this.$store.state.user.routerItem.name
    this.$AccessReport.report('advertisement-screen', [this.preject, '广告流量主', '插屏广告'])
    this.adSwitchStatus()
    if (this.routerItem.app_type != 2) {
      this.tasActiveList.push({ component: 'advertise', label: 'banner广告', value: 'banner', type: 3 })
    }
  },
  methods: {
    tabChange() {
      if (this.tabsActive === 'screen') {
        this.$AccessReport.report('advertisement-screen', [this.preject, '广告流量主', '插屏广告'])
      } else if (this.tabsActive === 'incentive') {
        this.$AccessReport.report('advertisement-incentive', [this.preject, '广告流量主', '激励广告'])
      } else {
        this.$AccessReport.report('advertisement-banner', [this.preject, '广告流量主', 'banner广告'])
      }
    },
    async adSwitchStatus() {
      try {
        const res = await adSwitchStatus({ mini_app_id: window.localStorage.getItem('mini_app_id') })
        if (res.status_code == 1) {
          this.status = Number(res.data.status)
        }
      } catch (error) {}
    },
    async switchChange() {
      try {
        const res = await adverSwitch({ status: this.status })
        if (res.status_code == 1) {
          this.$message.success(res.msg)
        }
      } catch (error) {}
    }
  }
}
</script>
<style lang="scss" scoped>
.content-outer {
  width: 100%;
  height: calc(100vh - 100px);
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
  overflow-x: hidden;
  .tabsPane {
    margin-top: 10px;
    ::v-deep .el-tabs__header {
      margin: 0 !important;
    }
  }
}
.title {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #1d2129;
  span {
    margin-right: 10px;
  }
}
.tabsPane {
  margin-top: 15px;
}
</style>